<script type="text/x-template" id="modelmanager">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="14">
                                <el-form-item label="标题" >
                                    <el-input v-model="searchform.title" placeholder="请输入标题"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary" @click="searchclick">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
                <el-main>
                    <div style="padding-bottom: 10px">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit" @click="add">添加</el-button>
                            <el-button type="primary" icon="el-icon-share"  @click="share_drawer = true"></el-button>
                            <el-button type="primary" icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </div>
                    <template>
                        <el-table
                                :data="tableList"
                                stripe
                                @row-click="row_click"
                                style="width: 100%;min-height: 500px">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    :show-overflow-tooltip="true"
                                    label="模型主键"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="modelTitle"
                                    :show-overflow-tooltip="true"
                                    label="模型标题"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="channelName"
                                    :show-overflow-tooltip="true"
                                    label="绑定栏目"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    width="200"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="250">
                                <template slot-scope="scope">
                                    <el-button @click="bindchannelId(scope.row)" type="text" size="small">绑定个人栏目</el-button>
                                    <el-button @click="updatefields(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button type="text" @click="deleteData(scope.row)" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[10,50,100,150,200,250,300]"
                            :page-size="size"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>



        <!-- 抽屉 (继续添加)       -->
        <el-drawer :title="title" :visible.sync="dialogFormVisible_continue_add"  size="90%">
            <div>
                <div v-if="isupdate">
                    <el-form :model="form"  label-width="100px" class="demo-ruleForm">
                        <el-form-item label="模型名称">
                            <el-input size="small" v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="统计类型">
                            <el-select size="small" v-model="form.sumtype" >
                                <el-option
                                        v-for="item in model_sum_type"
                                        :key="item.type"
                                        :label="item.typeName"
                                        :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="padding-left: 20px">
                    <div style="padding-top: 10px">
                        <el-button-group>
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="addrowone" >添加字段</el-button>
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="savedatalist" >保存数据</el-button>
                            <el-button type="primary" size="mini" icon="el-icon-edit" v-if="isupdate" @click="addliesumfield">添加列统计字段</el-button>
                        </el-button-group>
                    </div>
                    <div style="padding-top: 10px">
                        <el-table
                                size="small"
                                border
                                row-key="field"
                                ref="multipleTable"
                                :data="form.tableData"
                                @selection-change="handleSelectionChange"
                                style="width: 100%">
                            <el-table-column
                                    v-if="isupdate"
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="fieldName"
                                    label="字段名称"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.fieldName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    column-key="field"
                                    prop="field"
                                    label="字段"
                                    width="110">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.field"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="字段默认值"
                                    width="110">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.defaultValue"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="组件类型"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-select size="small" v-model="scope.row.component" placeholder="请选择组件">
                                        <el-option

                                                v-for="item in component"
                                                :key="item.componentType"
                                                :label="item.componentName"
                                                :value="item.componentType">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="字段字典"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-input v-if="scope.row.component=='select'" size="small" v-model="scope.row.dictKey"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="字段公式"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-input v-if="scope.row.component=='formula'" size="small" v-model="scope.row.formulaStr"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="组件宽度"
                                    width="110">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.width"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="组件排序"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-input-number size="small" v-model="scope.row.sort" @change="handleChange_sort" :min="1" :max="100" label="描述文字"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    v-if="isupdate"
                                    label="操作"
                                    fixed="right"
                                    width="160">
                                <template slot-scope="scope">
                                    <el-button @click="deletehandleClick(scope.row)" type="text" size="small">删除字段</el-button>
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                </div>

            </div>
        </el-drawer>



        <!-- 添加面板        -->
        <el-dialog title="添加面板" :visible.sync="dialogFormVisible_add">

            <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="模型名称" prop="title">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_add = false">取 消</el-button>
                <el-button type="primary" v-if="!continue_add" @click="continue_submit_add('form')">继续添加</el-button>
                <el-button type="primary" v-if="continue_add" @click="submit_add('form')">保存</el-button>
            </div>
        </el-dialog>

        <!-- 添加面板        -->
        <el-dialog title="绑定栏目" :visible.sync="dialogFormVisible_bindchannel">
            <div>

                    <el-cascader
                            v-model="bind_channelId"
                            :options="list"
                            :props="props"
                            style="width: 100%"
                            :clearable="true"
                            @change="handleChange_channel">
                    </el-cascader>

            </div>
            <div class="demo-drawer__footer" style="padding-top: 20px">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="save_bindmodel" >确认绑定</el-button>
            </div>
        </el-dialog>


    </div>
</script>
<script>
    let modelmanager={
        data() {
            return {
                model_sum_type:[],
                multipleTable:{},
                multipleSelection:[] ,//多选
                isupdate:false,
                title:'添加模型',
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                default_key:[],
                bind_id:'',
                bind_channelId:'',//选中的绑定id
                list:[],
                dialogFormVisible_bindchannel:false,//绑定栏目
                continue_add:false,
                component:[],//模型组件
                tableData:[],
                selectList:[], //下拉数据
                form:{
                    lie:[],
                    title:'',
                    sumtype:'',
                    tableData:[],
                }, //表单数据
                form_rules: {
                    title: [
                        {required: true, message: '请输入模型名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ]
                }, // 表单校验
                share_drawer:false,//抽屉
                dialogFormVisible_add:false, //添加面板
                dialogFormVisible_update:false, //编辑面板
                activeIndex2: '1', //导航默认选中
                searchform:{

                },
                tableList:[], //表格数据
                total:0, // 条数
                size:10,
                cancelForm() {
                    this.loading = false;
                    this.dialog = false;
                    clearTimeout(this.timer);
                },
                loading: false,
                pageNum:1,
                dialogFormVisible_continue_add:false
            }
        },
        created(){
            this.getsumtype();
            this.getmodelcomponent();
            this.getlist(this.pageNum)
            this.getChannel();
        },
        template: '#modelmanager',
        methods: {
            //删除字段
            deletehandleClick(row){
                while (this.form.tableData.indexOf(row) !== -1) {
                    this.form.tableData.splice(this.form.tableData.indexOf(row), 1);
                }
            },
            getsumtype(){
              api.GET('/modeview/getmodelsumtype',null,(res)=>{
                  if(res.code===0){
                      this.model_sum_type=res.data
                  }
              })
            },
            toggleSelection(rows) {
                this.$nextTick(()=>{
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                })
            },
            //添加列统计字段
            addliesumfield(){
                console.log(this.multipleSelection.length == 0)
                if(this.multipleSelection.length ==0){
                    this.$message.error('未选择数据');
                }else {
                    if(this.form.id){
                        let data={};
                        data.id= this.form.id;
                        data.fields=this.multipleSelection;
                        data.sumType=this.form.sumtype;
                        api.POST('/model/addliesumfield',data,(result)=>{
                            if(result.code===0){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                            }else {
                                this.$message.error('未选择数据');
                            }
                        })
                    }
                }
            },
            //编辑字段
            updatefields(row){
                this.isupdate=true;
                this.title='修改模型'
                api.GET('/model/getmodefieldlist',{'id':row.id},(res)=>{
                    if(res.code===0){
                        this.dialogFormVisible_continue_add=true;
                        this.form.id=row.id;
                        this.form.title=row.modelTitle;
                        this.form.tableData=res.data.array;
                        this.form.lie=res.data.lie;
                        this.form.sumtype=res.data.sumtype;
                        let selected=[];
                        for (let i = 0; i < res.data.array.length; i++) {
                            let obj=res.data.array[i];
                            if(this.form.lie.includes(obj.field)){
                                selected.push(obj);
                            }
                        }
                       // this.$nextTick(()=>{
                            this.toggleSelection(selected);
                       // })
                    }
                })
            },
            //确认保存
            save_bindmodel(){
                let data={};
                data.id=this.bind_id;
                data.channelId=this.bind_channelId;
                api.POST('/model/bindchannelId',data,(result)=>{
                    if(result.code===0){
                        this.$message({
                            showClose: true,
                            message: result.msg,
                            type: 'success'
                        });
                        this.dialogFormVisible_bindchannel=false;
                        this.getlist(this.pageNum);
                    }else {
                        this.$message.error(result.msg);
                    }
                })
            },
            handleChange_channel(val){

            },
            //绑定栏目
            bindchannelId(row){
                this.bind_id=row.id;
                this.bind_channelId=row.channelId;
                this.dialogFormVisible_bindchannel=true;
            },
            //保存数据
            savedatalist(){
                this.continue_add=true;
                this.dialogFormVisible_continue_add=false;
                if(this.form.id){
                    this.form.modelVos=this.form.tableData
                    api.POST('/model/addmodel',this.form,(res)=>{
                        if(res.code===0){
                            this.$message({
                                showClose: true,
                                message: res.msg,
                                type: 'success'
                            });
                            this.form={};
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                }
            },
            //获取模型组件
            getmodelcomponent(){
                api.GET('/model/getcomponent',null,(res)=>{
                    if(res.code===0){
                        this.component=res.data;
                    }
                })
            },
            handleChange_sort(val){
                console.log(val)
            },
            addrowone(){
              let form=this.getmodel();
              this.form.tableData.push(form);
            },
            getmodel(){
              let form={};
              form.uuid=api.getuuid();
              form.field=api.generateRandomLetters();
              form.fieldName='字段名称';
              form.defaultValue=0;
              form.width=130;
              form.sort=100;
              form.formulaStr='none';
              form.dictKey='none';
              return form;
            },
            //行点击
            row_click(row, column, event){
                if(column.label!=='操作'){
                    //做其他操作
                }
            },
            //搜索点击
            searchclick(){
                this.getlist(1);
            },
            //分页点击
            handleCurrentChange(val){
                this.pageNum=val;
                this.getlist(this.pageNum);
            },
            //打开更新
            update(val){
                this.isupdate=false,
                this.form=val;
                this.dialogFormVisible_update=true;
            },
            //确认更新
            submit_update(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.modelVos=this.tableData;
                        api.POST('/update',this.form,(result)=>{
                            if(result.code===0){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                                this.form={};
                                this.dialogFormVisible_update=false;
                            }else{
                                this.$message.error(result.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //添加
            add(){
                this.continue_add=false;
                this.form={};
                this.form.tableData=[];
                this.title='添加模型';
                this.isupdate=false;
                console.log(this.isupdate)
                this.dialogFormVisible_add=true;
            },
            //继续添加
            continue_submit_add(formName){
                this.dialogFormVisible_continue_add=true;
            },
            //添加确定
            submit_add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.modelVos=this.form.tableData
                        api.POST('/model/addmodel',this.form,(result)=>{
                            if(result.code===0){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                                this.form={};
                            }else{
                                this.$message.error(result.msg);
                            }
                        })
                        this.dialogFormVisible_add=false;
                    } else {
                        return false;
                    }
                });
            },
            //删除
            deleteData(val){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/model/delete',{'id':val.id},(result)=> {
                        if(result.code===0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getlist(this.pageNum);
                        }else{
                            this.$message.error(result.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getlist(val){
                this.searchform.pageNum=val;
                this.searchform.pageSize=this.size;
                api.GET('/model/page',this.searchform,(res)=>{
                    if(res.code===0){
                        this.tableList=res.data.records;
                        this.total=res.data.total;
                    }
                })
            },
            //多选
            handleSelectionChange(val){
                console.log(JSON.stringify(val))
                let arr = [];
                for (let i = 0; i < val.length; i++) {
                    let obj=val[i];
                    arr.push(obj.field);
                }
                console.log(JSON.stringify(arr))
                this.multipleSelection = arr;
            },
            locationfref(href){
                window.open(href);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            getChannel(){
                api.GET('/channel/getprichannelbind',null,(res)=>{
                    if(res.code===0){
                        this.list=res.data;
                    }
                })
            },

        }
    }
    Vue.component('modelmanager',modelmanager);
</script>
<style>
    .el-drawer__body {
        overflow: auto;
        /* overflow-x: auto; */
    }
</style>